import React, { memo } from 'react';
import { Button, Space, Table, Popconfirm } from 'antd';
import { ColumnsType } from 'antd/es/table';
import styles from './index.less';
export interface IUser {
  role: string;
  name: string;
  type: string;
}

export interface IUserProps {}

const UserList = (props: any) => {
  // console.log('is render');
  const { data, loading, pagination, onDeleteUser, onEditUser } = props;
  const columns: ColumnsType<IUser> = [
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
      align: 'center',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '用户类型',
      key: 'type',
      align: 'center',
      render: (text: any, record: any) => (
        <span>
          {record.role === 'admin'
            ? '管理员'
            : record.role === 'user'
            ? '普通用户'
            : '游客'}
        </span>
      ),
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (text: any, record: any) => (
        <Space size={'middle'}>
          <Button
            type={'link'}
            onClick={() => {
              onEditUser(record);
            }}
          >
            编辑
          </Button>
          <Popconfirm
            title={'确定删除该用户？'}
            onConfirm={() => onDeleteUser(record)}
          >
            <Button type={'link'}>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  return (
    <div>
      <Table
        className={styles.userTable}
        dataSource={data}
        loading={loading}
        rowKey={'id'}
        size={'small'}
        bordered={true}
        columns={columns}
        pagination={pagination}
      />
    </div>
  );
};

export default memo(UserList);
